<template>
  <FormView
    v-model="entity"
    :title="entity.id ? '修改房屋管理' : '新建房屋管理'"
    :toolbar-attrs="{ buttons: ['back', 'save', 'cancel'] }"
    :toolbar-listeners="{ save: persist }">
    <FormHolder ref="form" label-width="110px" :model="entity">
      <FormItemGroup block-title="基本信息">
        <ElFormItem label="所属楼栋" prop="edificeId" :rules="edificeRules" label-width="120px">
          <VueTreeSelect
            v-model="entity.edificeId"
            :options="edificeOptions"
            :class="['form-tree-select', { 'is-readonly': false }]"
            :normalizer="normalizer"
            :disable-branch-nodes="true"
            style="width: 99%"
            :show-count="true"
            placeholder="选择所属楼栋信息"
            @select="edificeTreeSelect" />
        </ElFormItem>
        <ElFormItem label="所属楼层" prop="storeyId" :rules="storeyRules" label-width="120px">
          <VueTreeSelect
            v-model="entity.storeyId"
            :options="storeyOptions"
            :class="['form-tree-select', { 'is-readonly': false }]"
            :normalizer="normalizerStore"
            no-options-text="无楼层名称选项"
            style="width: 99%"
            :disable-branch-nodes="true"
            placeholder="请先选择所属楼栋" />
        </ElFormItem>
        <FormTreeSelect
          v-model="entity.belongouinfoId"
          :span="24"
          label="管理单位"
          :options="deptTreeList"
          prop="belongouinfoId"
          required />

        <FormInput v-model="entity.name" prop="name" label="房间号" max-length="255" required />
        <FormInput v-model="entity.code" prop="code" label="房间编码" disabled />
        <FormInput v-model="entity.ageLimit" prop="ageLimit" label="产权年限" max-length="32" />
        <FormSelect v-model="entity.orientation" prop="orientation" label="房屋朝向" dict-type="house_face" />
        <FormRadioGroup
          v-model="entity.elevator"
          label="配套电梯"
          required
          prop="elevator"
          classic
          radio-type="radio"
          :options="[
            { label: '无', value: '0' },
            { label: '有', value: '1' }
          ]" />
        <FormSelect v-model="entity.typeCode" prop="typeCode" label="房屋类型" dict-type="house_type" />
        <FormSelect v-model="entity.status" prop="status" label="状态" dict-type="house_status" />
        <FormInputNumber v-model="entity.price" prop="price" label="房屋价格" :max="99999999" />
        <FormTextarea v-model="entity.purpose" rows="5" prop="purpose" label="房屋用途" max-length="1500" />
        <FormInputNumber v-model="entity.useArea" prop="useArea" label="使用面积" :min="0" :max="99999999" />
        <FormInputNumber v-model="entity.floorage" prop="floorage" label="建筑面积" :min="0" :max="99999999" />
        <FormRadioGroup
          v-model="entity.dangerous"
          label="是否危房"
          prop="dangerous"
          classic
          radio-type="radio"
          :options="[
            { label: '否', value: '0' },
            { label: '是', value: '1' }
          ]" />
        <FormRadioGroup
          v-model="entity.construction"
          label="是否正在施工"
          prop="construction"
          classic
          radio-type="radio"
          :options="[
            { label: '否', value: '0' },
            { label: '是', value: '1' }
          ]" />
        <FormInputNumber
          v-model="entity.constructionAge"
          prop="constructionAge"
          label="建造年代"
          :min="0"
          :max="9999" />
        <FormInputNumber v-model="entity.rent" prop="rent" label="租金" :min="0" :max="99999999" />
        <FormSelect v-model="entity.layout" prop="layout" label="房屋户型" dict-type="house_unit_type" />
        <FormSelect v-model="entity.renovation" prop="renovation" label="装修程度" dict-type="house_program" />
        <FormTextarea v-model="entity.remarks" rows="5" prop="remarks" label="备注" max-length="3000" />
      </FormItemGroup>
      <FormItemGroup :gutter="0" block-title="附件信息">
        <UploadPage
          v-if="entity.unid"
          ref="UploadPage"
          style="padding: 0"
          :unique-code="entity.unid"
          model="space"
          classify="regional" />
      </FormItemGroup>
    </FormHolder>
  </FormView>
</template>

<script>
  import { addObj, putObj, getObj, getEdificeTree, create } from '@/api/space/fyroomhouse'
  import { uuid } from '@web-utils/integrations/uuid'
  import form from '@/vue/mixin/form'

  import { storeyLazyTree } from '@/api/space/fyroomstorey'
  import { fetchTree } from '@/api/admin/dept'

  export default {
    name: 'HouseForm',
    relativeViewId: 'HouseView',

    mixins: [form],
    data() {
      return {
        entity: {
          ageLimit: '',
          assetNumber: '',
          belongouinfoFullname: '',
          belongouinfoId: null,
          belongouinfoName: '',
          code: '',
          construction: '0',
          constructionAge: null,
          createBy: '',
          createId: 0,
          createTime: '',
          dangerous: '0',
          dataCode: '',
          deptFullname: '',
          deptId: null,
          edificeId: null,
          elevator: '0',
          floorage: null,
          id: '',
          layout: '',
          name: '',
          ordernumber: 0,
          orientation: '',
          parentFullname: '',
          price: null,
          purpose: '',
          remarks: '',
          renovation: '',
          rent: null,
          status: '0',
          storeyId: null,
          storeyName: '',
          typeCode: '',
          typeName: '',
          unid: '',
          updateBy: '',
          updateTime: '',
          useArea: null
        },
        edificeOptions: [],
        storeyOptions: [],
        deptTreeList: [],
        edificeRules: { required: true, message: '请选择所属楼栋', trigger: 'change' },
        storeyRules: { required: true, message: '请选择所属楼层', trigger: 'change' }
      }
    },
    created() {
      this.init()
    },
    methods: {
      create,
      load: getObj,
      save: addObj,
      update: putObj,
      async init() {
        const res = await getEdificeTree()
        this.edificeOptions = res.data.data

        if (this.entity.edificeId) {
          this.loadStoreLazyTree(this.entity.edificeId)
        }

        const deptRes = await fetchTree()
        this.deptTreeList = deptRes.data.data

        uuid(true)
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.idCard,
          label: node.name,
          isDisabled: this.$isBlank(node.children) && node.affiliName === 'REGIONAL',
          children: node.children
        }
      },
      normalizerStore(node) {
        return {
          id: node.idCard,
          label: node.name,
          children: node.children && node.children.length > 0 ? node.children : 0
        }
      },
      edificeTreeSelect(node, instanceId) {
        this.loadStoreLazyTree(node.idCard)
      },
      loadStoreLazyTree(edificeId) {
        storeyLazyTree(edificeId).then(response => {
          this.storeyOptions = response.data.data
        })
      }
    }
  }
</script>
